<template>
  <div class="edit-box">
    <el-form label-width="120px" class="form-grid" :model="selfForm">

      <el-form-item label="* 技工类型">
        <el-radio-group v-model="technician_type">
          <el-radio-button label=1> 平台技工 </el-radio-button>
          <el-radio-button label=2> 啄木鸟技工 </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <div class="form-box" v-if="technician_type==1">
        <universal-table :columns="columns" :fetch-data="fetchTableData" permission-prefix="order:service"
          :show-selection="true" :show-index="true" :init-search-form="{}" @edit="handleEdit" :bt1Name="'分配技工'"
          @reset="reset" ref="table">

          <!-- 搜索区域扩展 -->
          <template #searchExtend>
            <el-form-item prop="cate_id">
              <el-select v-model="cate_id" placeholder="请选择" @change="handleNodeChange">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"

                  >
                  </el-option>
              </el-select>
            </el-form-item>
          </template>
        </universal-table>
      </div>

      <div v-if="technician_type==2" class="bt-box">

      <el-button type="primary" @click="submitData" > 分配至啄木鸟</el-button>


      </div>

    </el-form>
  </div>
</template>

<script>
  import UniversalTable from "@/components/TableComponent.vue";

  import {
    SERVICE_STATUS,
    EDUCATION,
    PRINCIPAL_TYPE,
    NATUREOFWORK
  } from '@/constants/statusMap';
  export default {
    components: {
      UniversalTable,

    },
    props: {

      formData: {
        type: Object,
        required: true
      },
    },
    data() {
      return {
        options:[
          {label: "请选择服务分类", value: 0}
        ],
        cate_id:0,
        order_id:this.formData.id,
        selfForm:{},
        technician_type: 1,
        EDUCATION,
        SERVICE_STATUS,
        PRINCIPAL_TYPE,
        NATUREOFWORK,
        currentRow: null,
        approvedOptions:[],
        columns: [{
            prop: "real_name",
            label: "真实姓名"
          },
          {
            prop: "tel",
            label: "电话"
          },

          {
            prop: "id_card_number",
            label: "身份证号"
          },
          {
            prop: "principal_type",
            label: "主体类型",
            tag: true,
            tagConfig: PRINCIPAL_TYPE
          },
          {
            prop: "cate_name",
            label: "意向行业"
          },
          {
            prop: "nature_of_work",
            label: "工作性质",
            tag: true,
            tagConfig: NATUREOFWORK
          },
          {
            prop: "experience_years",
            label: "从业年限"
          },
          {
            prop: "p_title",
            label: "所在省"
          },
          {
            prop: "c_title",
            label: "所在市"
          },
          {
            prop: "education",
            label: "学历",
            tag: true, // 启用标签显示
            tagConfig: EDUCATION

          },
          {
            prop: "service_status",
            label: "接单状态",
            tag: true, // 启用标签显示
            tagConfig: SERVICE_STATUS
          },
          {
            prop: "create_time",
            label: "创建时间"
          },
        ],
        searchForm: {
          approved_status: 1,
        },

      };
    },

    mounted() {
      this.getOptionsList();
    },


    methods: {
      // 获取表格数据
      async fetchTableData(params = {}) {
        this.searchForm.category = this.formData.cate_id
        this.searchForm.order_id = this.formData.id
        // this.searchForm.city_name = this.formData.city
        // this.searchForm.service_status = 1;
        const postData = Object.assign({}, params, this.searchForm);
        try {
          const result = await this.$httpRequest.post('/technician/profile/list', postData)
          console.log('-------fetchTableData----', result)
          return result
        } catch (e) {
          this.$message.error(e.message)
          throw e // 保持错误继续向上传递
        }
      },
      //重置
      reset() {
        this.searchForm.approved_status = 1;

      },
      // 编辑
      handleEdit(row) {

        this.currentRow = {
          ...row
        }; // 可深拷贝

        let postParam={}
        postParam.id=this.order_id*1;
        postParam.technician_type = this.technician_type*1;
        postParam.technician_id = this.currentRow.id*1;


        this.$emit("assigning_order",postParam);
        //console.log('edit-----postParam', postParam)
      },

      submitData(){
        let postParam={}
        postParam.id=this.order_id*1;
        postParam.technician_type = this.technician_type*1;
        this.$emit("assigning_order",postParam);
      },

      handleNodeChange(val) {
        console.log("---选择改变:", val);

        this.searchForm.category=val

      },

      getOptionsList() {
        this.$httpRequest.get('/product/category/top').then(result => {

          this.options = [...this.options,...result];
        }).catch(e => {
          this.$message.error(e.message)
        });
      },


    },
  };
</script>

<style scoped>
  .bt-box{
    padding-left: 50px;
  }
  .form-box {
    display: flex;
  }
</style>
